<template>
	<view>
		<u-navbar  	 title="我的" title-color="#000000" :is-back="false"
					:border-bottom="false" 
					:background="myNavbarBG">
		</u-navbar>			
		<view class="u-p-20 header">
			<u-row>
				<u-col :span="7">
					<view class="u-flex u-row-left u-col-center">
						<view>
							<u-avatar mode="square" :size="90" :src="vuex_userInfo.avatar"></u-avatar>
						</view>
						<view class="u-p-b-15" 
								style="margin-left: 20rpx;display:flex;flex-direction: column;justify-content: space-between;align-items: left;">
							<view style="font-size: 30rpx;color:#000000">{{vuex_userInfo.userName}}</view>
							<view>
								<u-tag v-if="vuex_userInfo.vipLevel==1" text="普通会员" mode="light" shape="circle" size="mini" type="warning"/>
								<u-tag v-if="vuex_userInfo.vipLevel==2" text="钻石会员" mode="dark" shape="circle" size="mini" type="warning"/>
							</view> 
						</view>
					</view>
				</u-col>
				<u-col :span="5">
					<view class="u-flex u-row-right u-col-center" style="color: #000000;height: 90rpx;">
						<view>
							<u-icon name="arrow-right" label="设置" label-pos="left" label-color="#000000"></u-icon>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		
		<view class="u-margin-20 u-p-30" style="background-color: #ffffff;border-radius: 10rpx;">
			<view style="font-size: 32rpx;color: #000000;padding-left: 10rpx;margin-bottom: 20rpx;">我的资产</view>
			<view style="padding:0rpx 20rpx;text-align: center;">
				<u-row>
					<u-col :span="4">
						<view style="height: 90rpx;display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
							<view style="color: #fa3534;font-weight: bold;font-size: 34rpx;">{{Number(vuex_userInfo.accountBalance).toFixed(2)}}</view>
							<view>我的钱包</view>
						</view>
					</u-col>
					<u-col :span="4">
						<view style="height: 90rpx;display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
							<view style="color: #f29100;font-weight: bold;font-size: 34rpx;">{{Number(vuex_userInfo.integralBalance)}}</view>
							<view>我的积分</view>
						</view>
					</u-col>
					<u-col :span="4">
						<view style="height: 90rpx;display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
							<view style="color: #2979ff;font-weight: bold;font-size: 34rpx;">{{Number(vuex_userInfo.couponsCount)}}</view>
							<view>优惠券</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		
		<view class="u-margin-20 u-p-30" style="background-color: #ffffff;border-radius: 10rpx;">
			<view style="font-size: 32rpx;color: #000000;padding-left: 10rpx;margin-bottom: 20rpx;">服务中心</view>
			<view>
				<u-grid :col="4" hover-class="none" :border="false">
					<u-grid-item v-for="(girdItem,index) in girdList" :key="index" 
							:custom-style="customGirdStyle" @click="girdClick(index)">
						 <view>
							 <u-icon  :name="girdItem.icon" :size="46" :color="girdItem.iconColor"></u-icon>
						 </view>
						<view class="u-line-1 u-font-26 u-m-t-10">{{girdItem.title}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- padding:30rpx 10rpx 30rpx 30rpx; -->
		<view class="u-m-20" style="background-color: #ffffff;border-radius: 10rpx;padding: 30rpx 0rpx 30rpx 0rpx;">
			<view style="font-size: 32rpx;color: #000000;padding:0rpx 30rpx;margin-bottom: 32rpx;">更多功能</view>
			<view>
				<u-gap height="1" :bg-color="baseColor"></u-gap>
			</view>
			<view  v-for="(cellItem,index) in cellList" :key="index">
				<view  class="u-flex u-row-between u-col-center"
						style="color: #000000;font-size: 26rpx;margin-top: 10rpx;padding:20rpx">
					<view  class="u-flex u-row-left u-col-center">
						<view class="u-m-r-16">
							<u-icon :name="cellItem.icon" :size="34" :color="cellItem.iconColor"></u-icon>
						</view>
						<view>
							<text>{{cellItem.title}}</text>
						</view>
					</view>
					<view>
						<u-icon name="arrow-right" color="#606266"></u-icon>
					</view>
				</view>
				<view>
					<u-gap height="1" :bg-color="baseColor"></u-gap>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				girdList:[
					{title:'我的地址',icon:'map-fill',iconColor:'#2979ff'},
					{title:'我的订单',icon:'grid-fill',iconColor:'#fa3534'},
					{title:'充值中心',icon:'rmb-circle-fill',iconColor:'#19be6b'},
					{title:'领券中心',icon:'coupon-fill',iconColor:'#ff8ed4'},
					{title:'积分商城',icon:'integral-fill',iconColor:'#bc8cff'},
					{title:'资讯中心',icon:'volume-up-fill',iconColor:'#ff9900'},
					{title:'留言建议',icon:'email-fill',iconColor:'#77beff'},
					{title:'联系客服',icon:'server-man',iconColor:'#00557f'}				
				],
				customGirdStyle:{
					padding: '26rpx 0',
					color:'#000000'
				},
				cellList:[
					{title:'关于我们',icon:'info-circle-fill',iconColor:'#ff9900'},
					{title:'学习中心',icon:'question-circle-fill',iconColor:'#77beff'},
					{title:'商务洽谈',icon:'pushpin-fill',iconColor:'#00557f'}		
				]
			};
		},
		methods:{
			girdClick:function(index){
				let url="";
				let type="to";
				switch (index){
					//地址
					case 0:
						url="/pages/common/my-address/my-address";
						break;
					case 1:
						url="/pages/tabbar/order/order";
						type="tab";
						break;
					//订单	
					default:
						url="";
						break;
				};
				if(url.length>0){
					this.$u.route({
						type:type,
						url:url
					})
				}else{
					this.globalUtil.utilAlert("尚在开发中，敬请期待");
					return;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		background-color:$navbar-bg;
		height: 150rpx;
		color: #ffffff;
	}
	.navbar-box{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}
</style>
